﻿body
{
    padding-top: 60px;
    padding-bottom: 40px;
}

.magicbox
{
    background-color: #EEEEEE;
    border-radius: 6px 6px 6px 6px;
    min-width: 200px;
    padding: 10px;
    width: 20%;
}
#loading {text-align:center; visibility:hidden  }
#overlayedFrameFooter {
    margin-top: 4%;
    left: 44%;
    position: absolute;
    text-align: center;
    width: 200px;
}


.ellipsis {
    overflow: hidden;
    height: 300px;
    line-height: 25px;
    margin: 10px;
}

    .ellipsis:before {
        content: "";
        float: left;
        width: 5px;
        height: 300px;
    }

    .ellipsis > *:first-child {
        float: right;
        width: 100%;
        margin-left: -5px;
    }

    .ellipsis:after {
        content: "\02026";
        box-sizing: content-box;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        float: right;
        position: relative;
        top: -25px;
        left: 100%;
        width: 3em;
        margin-left: -3em;
        padding-right: 5px;
        text-align: right;
        background-size: 100% 100%;
        /* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
        background-image: url();
        background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
        background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    }
